
const app = new Vue({
        el: '#app',
        data() {
            //验证学号是否成功
            const rulesSno =(rules,value,callback)=>{
                axios.post(this.baseURL+'check/',
                    {
                        'str': value
                    }
                ).then(res=>{
                    if(res.data.code === 1){
                        if(res.data.exists){
                            callback(new Error('学号已存在'))
                        }else{
                            callback()
                        }
                    }else{
                        callback(new Error('查询错误'))
                    }
                })
                .catch(err=>{
                    callback(new Error('服务器错误'))
                })
            }
            return {
                baseURL: 'http://127.0.0.1:8000/',
                studentList: [],
                pageStudents: [],
                total: 100,
                currentPage4: 1,
                pageSize4: 10,
                inputStr: '',
                studentForm: {
                    sno: '',
                    name: '',
                    gender: '男',
                    birthday: '',
                    mobile: '',
                    email: '',
                    address: '',
                    image: ''
                },
                rules: {
                    sno: [
                        { required: true, message: '请输入学号', trigger: 'blur' },
                        { validator: rulesSno, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    birthday: [
                        { required: true, message: '请选择出生日期', trigger: 'change' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' }
                    ]
                },
                // 抽屉相关数据
                drawerVisible: false,
                loading: false,
                formLabelWidth: '120px',
                form: {
                    id: '',
                    name: '',
                    region: ''
                }
            }
        },
        mounted() {
            this.getStudentList();
        },
        methods: {
            getStudentList() {
                axios.get(this.baseURL+'students/')
                .then(response => {
                    console.log('获取学生列表响应:', response.data);
                    // 检查后端返回的状态码
                    if (response.data.code === 1) {
                        // 成功获取数据
                        this.studentList = response.data.data;
                        this.total = response.data.data.length;
                        this.getPageStudents();
                        console.log('学生列表数据:', this.studentList);
                    } else {
                        // 后端返回错误
                        console.error('后端返回错误:', response.data.msg);
                        alert('获取数据失败: ' + response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('获取学生列表失败:', error);
                    alert('获取学生数据失败，请检查网络连接或CORS配置');
                });
            },
            getPageStudents() {
                this.pageStudents = [];
                for(let i=(this.currentPage4-1)*this.pageSize4;i<this.currentPage4*this.pageSize4;i++){
                    if(i<this.total){
                        this.pageStudents.push(this.studentList[i]);
                    }
                }

                const start = (this.currentPage4 - 1) * this.pageSize4;
                const end = start + this.pageSize4;
                this.pageStudents = this.studentList.slice(start, end);
            },
            handleSizeChange(val) {
                this.pageSize4 = val;
                this.getPageStudents();
            },
            handleCurrentChange(val) {
                this.currentPage4 = val;
                this.getPageStudents();
            },
            queryStudent() {
                axios.post(this.baseURL+'students1/',{
                    str: this.inputStr
                })
                .then(response => {
                    console.log('查询学生响应:', response.data);
                    // 检查后端返回的状态码
                    if (response.data.code === 1) {
                        // 成功获取数据
                        this.studentList = response.data.data;
                        this.total = response.data.data.length;
                        this.getPageStudents();
                        console.log('查询到的学生列表数据:', this.studentList);
                    } else {
                        // 后端返回错误
                        console.error('后端返回错误:', response.data.msg);
                        alert('查询数据失败: ' + response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('查询学生失败:', error);
                    alert('查询学生数据失败，请检查网络连接或CORS配置');
                })
            },
            // 抽屉相关方法
            handleCloseDrawer(done) {
                // this.$confirm('确认关闭吗？')
                // .then(_ => {
                //     done();
                // })
                // .catch(_ => {});
                  done();
            },
            submitForm() {
                axios.post(this.baseURL+'check/', this.studentForm)
                .then(response => {
                    console.log('提交学生响应:', response.data);
                    // 检查后端返回的状态码
                    if (response.data.code === 1) {
                        // 成功提交数据
                        this.$message.success('提交成功');
                        this.drawerVisible = false;
                        this.getStudentList(); // 刷新学生列表
                    } else {
                        // 后端返回错误
                        console.error('后端返回错误:', response.data.msg);
                        alert('提交数据失败: ' + response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('提交学生失败:', error);
                    alert('提交学生数据失败，请检查网络连接或CORS配置');
                });
                this.loading = true;
                // 模拟表单提交
                setTimeout(() => {
                    this.loading = false;
                    this.drawerVisible = false;
                    this.$message.success('提交成功');
                    console.log('表单数据:', this.studentForm);
                }, 1500);
            },
            addStudentForm() {
                // 清空表单数据
                this.studentForm = {
                    sno: '',
                    name: '',
                    gender: '男',
                    birthday: '',
                    mobile: '',
                    email: '',
                    address: ''
                };
                this.drawerVisible = true;  
            },

            // 打开抽屉编辑学生信息
            handleClick(row) {
                console.log('编辑学生:', row);
                // 填充表单数据
                this.studentForm.sno = row.sno || '';
                this.studentForm.name = row.name || '';
                this.studentForm.gender = row.gender || ''; // 确保设置性别字段
                this.studentForm.birthday = row.birthday || '';
                this.studentForm.mobile = row.mobile || '';
                this.studentForm.email = row.email || '';
                this.studentForm.address = row.address || '';
                this.drawerVisible = true;
            }
        }
    })
